import React, { useEffect, useState } from 'react'
import { recommendlist} from "../../apis/home"
import "../../style/home/sell.scss"
import { InfiniteScroll, List } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
export default function Sell() {
    const navigate = useNavigate()
    const [count,setcount] = useState(1)

    let [list, setlist] = useState<any>([])
    const [hasMore, setHasMore] = useState(true)

    useEffect(() => {
        recommend()
    }, [])

    let recommend = async () => {
        let ok = await recommendlist(count)
        setlist([...list, ...ok.data])
        setHasMore(ok.data.length !== 0)
        // console.log(ok.data.length)
        setcount(count+1)


        // console.log(count);

    }

    let run = (proid: any) => {
        navigate("/details",{state:{proid}})
    }
    return (
        <div>
            <List className="sell">
                {
                    list &&
                    list.length &&
                    list.map((item: any) => (
                        <List.Item arrow={false} key={item.proid} className="item" onClick={() => { run(item.proid) }}>
                            <img src={item.img1} alt="" />
                            <p className='proname'>{item.proname}</p>
                            <p className='price'>￥ {item.originprice}</p>
                        </List.Item>
                    ))
                }
            </List>
            <InfiniteScroll loadMore={recommend} hasMore={hasMore} />
        </div>
    )
}
